<template>
	<div class="bg">
		<loading v-show='!show'></loading>
		<div>
			<h3>{{$t('home.portLable')}}</h3>
			<button @click="goDetail" class="small-btn button button--aylen" >{{$t('home.detailBtn')}}</button>
		</div>
		<transition name='fade'>
		<div v-show='show'>
			<table >
				<thead class="table-gradient-head thead-top-line">
					<tr >
						<th style="width: 117px;">{{$t('home.portTableTh1')}}</th>
						<th style="width: 66px;">{{$t('home.portTableTh2')}}</th>
						<th style="width: 133px;">{{$t('home.portTableTh3')}}</th>
						<th style="width: 99px;">{{$t('home.portTableTh4')}}</th>
						<th style="width: 102px;">{{$t('home.portTableTh5')}}</th>
						<th style="width: 114px;">{{$t('home.portTableTh6')}}</th>
					</tr>
				</thead>
			</table>
			<table class="tablebody" >
				<tbody>
					<tr v-for='item in eths'>
						<template v-if="item.name">
							<td style="width: 117px;">{{item.name}}</td>
							<td style="width: 66px;">
								<img v-if="item.up" src="../../../img/portlight.png" />
								<img v-else src="../../../img/portgray.png" />
							</td>
							<td style="width: 133px;">{{item.macaddr}}</td>
							<td style="width: 99px;">{{convertFlow(item.out_bps)}}</td>
							<td style="width: 102px;">{{convertFlow(item.in_bps)}}</td>
							<td style="width: 114px;">{{convertFlow(item.out_bps + item.in_bps)}}</td>
						</template>
					</tr>
				</tbody>
			</table>
		</div>
		</transition>
	</div>
</template>
<script>
import loading from 'components/common/loading'
export default {
	components:{
		loading
	},
	props:{
		eths:{
			type:Array,
			required:true
		},
		show:{
			type:Boolean,
			required:true
		}
	},
	methods: {
		goDetail() {
			this.$router.push('/current/port')
		},
		convertFlow(bps) {
			let flow = ''
			if (bps < 1024) {
				flow = Math.ceil(bps) + ' Bps'
			}
			if (bps >= 1024 && bps < 1024*1024) {
				flow = bps/1024
				flow = flow.toFixed(2) + ' KBps'
			}
			if (bps >= 1024*1024 && bps < 1024*1024*1024) {
				flow = bps/1024/1024
				flow = flow.toFixed(2) + ' MBps'
			}
			if (bps >= 1024*1024*1024) {
				flow = bps/1024/1024/1024
				flow = flow.toFixed(2) + ' GBps'
			}
			return flow
		}
	}
}
</script>
<style scoped>
	.bg {
		background: #FFFFFF;
		margin-top: 20px;
		background: #ffffff;
		height:260px;
		padding: 5px 28px;
		position: relative;
	}
	
	h3 {
		line-height: 30px;
		font-size: 14px;
		display: inline-block;
	}
	
	.button {
		float: right;
		margin-top: 5px;
	}

	table {
		display: inline-block;
		width: 100%;
	}
	.tablebody{
		margin-top: -5px;
		height: 170px;
		overflow-y: auto;
	}

</style>